<template>
	<div class="three">
		<el-select size="small" v-model="params.prov" @change="getCityData" filterable placeholder="请选择">
			<el-option v-for="(item,index) in provData" :key="index" :label="item" :value="item">
			</el-option>
		</el-select>
		<el-select size="small" v-model="params.city" @change="getDistData" filterable placeholder="请选择">
			<el-option v-for="(item,index) in cityData" :key="index" :label="item" :value="item">
			</el-option>
		</el-select>
		<el-select size="small" v-model="params.dist" @change="sendData" filterable placeholder="请选择">
			<el-option v-for="(item,index) in distData" :key="index" :label="item" :value="item">
			</el-option>
		</el-select>
	</div>
</template>
<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				params: {
					prov: '请选择',
					city: '请选择',
					dist: '请选择',
				},
				provData: [],
				cityData: [],
				distData: []
			}
		},
		props: {
			sendParams: ''
		},
		watch: {
			sendParams() {
				this.params = this.sendParams;
				this.selectChild2();
				this.selectChildByTwo2();
			}
		},
		mounted() {
			this.getProvData();
		},
		methods: {
			// 获取省
			getProvData() {
				axios.get('../../static/city.json').then((res) => {
					this.list = res.data.data;
					for(var i in this.list) {
						this.provData.push(i);
					}
				})
			},
			// 获取市
			getCityData() {
				this.cityData = [];
				for(var i in this.list) {
					if(i == this.params.prov) {
						for(var j in this.list[i]) {
							this.cityData.push(j);
						}
					}
				}
			},
			// 获取区
			getDistData() {
				this.distData = [];
				for(var i in this.list) {
					if(i == this.params.prov) {
						for(var j in this.list[i]) {
							if(j == this.params.city) {
								for(var k in this.list[i][j]) {
									this.distData.push(this.list[i][j][k]);
								}
							}
						}
					}
				}
			},
			// 发送数据给父组件
			sendData() {
				this.$emit('sendCityData', this.params.prov + this.params.city + this.params.dist);
			}
		},
	}
</script>
<style lang="less">
	.three {
		.el-select {
			width: 200px;
		}
	}
</style>